<template>
    <div>
        <headerSearch title="圈子活动" :searchBack="true" @done="gotobtn"></headerSearch>
        <rearchKey :search_intop="search_intop" :searchISshow="searchISshow" v-on:spot="spot" :clearShow="clearShow" @clearClick="clearClick" @searchCancel="searchCancel"></rearchKey>
        <div class="pagecontent main-activity" style="background-color: #fff;">
            <!-- 请输入企业名称 -->
            <div>
                <el-row class="block-col-2">
                    <el-col :span="24">
                        <el-dropdown trigger="click" @command="handleCommand" >
                            <span class="el-dropdown-link" style="padding: 0 0.2rem;">
                                {{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" style="width: 7.5rem;margin-left: -3.75 !important; margin-top:0 !important;left:0 !important;padding:0 !important;">
                                <el-dropdown-item icon="el-icon-plus" v-for="(colleague, ind) in CompanyList" :key="ind" :command="colleague" >{{colleague.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>  
            </div>
            <!-- 活动列表 -->
            <div class="active_list">
                <div class="active_item"> 
                    <!-- <div style="font-size: 0.3rem; color: rgb(102, 102, 102);line-height: 0.5rem;height: 0.5rem;" v-if="actives == ''">
                        --&nbsp;暂无数据&nbsp;--
                    </div> -->
                    <ul>
                        <li v-for="(activeitem, act) in actives" :key="act" @click="jumpActivity(activeitem.id)">
                            <a href="javascript:void(0)" class="clear">
                                <span class="active_list_img">
                                    <img src="../common/images/cindex_19.jpg" v-if="activeitem.img == null">
                                    <img :src="activeitem.img" alt="" v-else>
                                </span>
                                <p class="active_text"><em class="cur" v-if="activeitem.isTuijian == 1">热门</em>{{activeitem.title}}</p>
                                <p class="active_text">开始时间：{{activeitem.begin_time}}</p>
                                <p class="active_text"><span><sub>￥</sub><strong>{{activeitem.price}}</strong>起</span></p>
                                <!-- <span>{{activeitem.apply_num}}</span> -->
                            </a>
                        </li>
                    </ul>
                    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
                        <span slot="no-more" class="contentEmpty">
                            <template v-if="actives.length">
                                (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                            </template>
                            <template v-if="!actives.length">
                            <img src="../common/images/failedLoad.png" alt="">
                            <em>暂无查询结果</em>
                            </template>
                        </span>
                        <span slot="no-results" class="contentEmpty">
                            <template v-if="actives.length">
                                (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                            </template>
                            <template v-if="!actives.length">
                                <img src="../common/images/failedLoad.png" alt="">
                                <em>暂无查询结果</em>
                            </template>
                        </span>
                    </infinite-loading>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import InfiniteLoading from 'vue-infinite-loading';
import rearchKey from '../public/rearchKey';
    export default {
        data() {
            return {
                // path:'http://fc.x.e000.com',
                placeholder: '请输入企业名称',
                companyName: '',
                cid:'',
                CompanyList:[],
                companyName:'所有企业',
                actives: [],

                searchISshow: false,   //关键字搜索框出现
                clearShow: false,      //清除内容
                searche: '',            //输入内容
                search_intop: '',   //遮罩层样式         
                
                page:0,     //上拉加载
                num:10,     //显示10条数据
                ptype:0,
            }
        },
        mounted() {
            let that = this;
            that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            that.access_token = window.localStorage.getItem('access_token');
            that.cid = that.$route.query.cid;
            //获取当前圈子所有产品
            that.getCircleAllProduct();
            //获取圈子中的企业
            that.getUserEnterprise();
        },
        watch: {
            searche(value) {
                if(value != '') {
                    this.clearShow = true;
                    this.search_intop = 'background-color: transparent; z-index: 0;'
                }else {
                    this.clearShow = false;
                    this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);'
                }
            }
        },
        methods: {
            // 获取 监听子组件input值的动向值
            spot(data) {
                this.searche = data;
                this.ptype = 1;
                this.onInfinite();
            },
            // 上拉加载
            onInfinite() {
                let that = this;
                console.log("触发")
                setTimeout(() => {       
                    const temp = []; 
                    let cid = that.cid;
                    let keyword = this.searche;
                    if(!keyword) keyword = 0;
                    //排序
                    let page = '';
                    if(that.ptype == 1){
                        that.circlelist = [];
                        page = 0;
                    }else{
                        if(that.page == 0){
                            page = 1;
                        }else{
                            page = that.page;
                        }
                    }
                    console.log('key',page);
                    that.$fetch(that.$path+'/api.php/Circle/getCircleAllActivity', {cid:cid,cpId:0,page:page,keyword:keyword})
                        .then((res) => {
                        
                        if(res.code == 200){
                            let array = res.data;
                            page++;
                            if(array == '') {
                            that.infos = [];
                        }else {
                            array.forEach(element => {
                                temp.push(element);
                            });
                            that.CompanyList = that.CompanyList.concat(temp);  
                            if(that.num > array.length){
                                that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                                return;
                            }
                        }
                        // $state.loaded();  
                        that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }else {
                            that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                            return;
                        }  
                        that.ptype = 0;    
                    });      
                }, 1000);
            },
            companyClick(company_name) {
                this.companyName = company_name;
            },
            //点击活动查看详情
            jumpActivity(val){
                console.log(val);
                this.$router.push({
                    path: '/activityDetail',
                    query: {id: val}
                })
            },
            //获取当前圈子所有的活动
            getCircleAllProduct(){
            let that = this;
            let cid = this.cid;
            let keyword = this.searche;
            if(!keyword) keyword = 0;
            let page = that.page;
            this.$fetch(this.$path+'/api.php/Circle/getCircleAllActivity',{cid:cid,cpId:0,page:page,keyword:keyword})
            .then((res) => {
                console.log('活动信息',res);
                if(res.code == 200){
                this.actives = res.data;
                }    
            });
            },
            //获取圈子中的企业
            getUserEnterprise:function(){
                let that = this;
                let cid = that.cid;

                this.$fetch(that.$path+'/api.php/Circle/getCircleCompanyList',{cid:cid})
                .then((res) => {
                console.log('圈子企业',res);
                that.CompanyList = res.data.list;
                })
            },
            handleCommand(command) {

                let c_info = command;
                let c_id = c_info.id;
                this.companyName = c_info.name;
                // let userId = this.userInfo.uid;
                // let request = this.request;
                //获取所选的企业下面的产品
                this.$fetch(this.$path + '/index.php/api/Activity/getActivityList', {c_id}).then((response) => {
                    if(response.code == 200) {
                        this.actives = response.data;
                        // if(response.data){
                        //     response.data.forEach((element,index) => {
                        //       this.hostlist.splice(0,0,{id:element.IDProduct,name:element.chrName,img:element.smallImg,date_time:element.dtCreate,Num:element.NumS,check:false});
                        //     });
                        // }
                        
                    }else{
                        this.actives = [];
                    }
                })
            },
            // 点击搜索图标出现搜索框
            gotobtn() {
                this.searchISshow = true;
            },
            // 点击取消隐藏搜索框
            searchCancel(data) {
                this.searchISshow = false;
                // this.search = '';
                data = '';
            },
            // 清除内容
            clearClick(data) {
                // this.search = '';
                data = '';
            },
        },
        components: {
            headerSearch,
            InfiniteLoading,
            rearchKey
        },
    }
</script>

<style>
.el-row {
    border-bottom: 0.2rem solid #f5f5f5;
}
/* 全部同事 */
.el-col-24 {
    height: 1rem;
    line-height: 1rem;
    /* padding: 0 0.2rem; */
    box-sizing: border-box;
}
/* 全部同事第一层级 */
.el-col-24 .el-dropdown {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    display: block;
}
/* 文字 */
 .el-dropdown-link {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    cursor: pointer;
    display: block;
    /* padding: 0 0.2rem; */
}
  /* 下拉icon */
.el-icon--right {
    float: right;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
}
/* 下拉层级 */
.el-dropdown-menu {
    /* width: 100%;
    height: auto;
    box-shadow: none;
    left: 47% !important;
    margin: 0;
    margin-left: -50%;
    padding: 0;
    margin-top: 0 !important; */
}
/* 三角符号 */
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
    display: none;
}
/* 下拉item */
.el-dropdown-menu__item {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0 0.2rem;
    box-sizing: border-box;
}



.main-activity {
    background-color: #fff;
}
.main-activity .active_item ul>li:first-child a {
    padding-top: 0.2rem;
}
</style>